<template>
    <div class="spuBasicInfo">
        <el-form :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="name">
                <el-input @change="addSpuName" v-model="name"></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="name">
                <quill-editor
                        v-model="content"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                </quill-editor>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts">
    import {Component, Emit, Vue,Prop} from 'vue-property-decorator';
    import $ from "jquery";
    import {namespace} from 'vuex-class'
    import {quillRedefine} from 'vue-quill-editor-upload';
    const goodStore=namespace("goods");
    @Component({
        components:{
            quillRedefine
        }
    })
    export default class SpuBasicInfo extends Vue {
        @Prop() params;
        @goodStore.Mutation updateGoodState;
        public isShowDialog:any=true;
        public name:any="";
        public rules:any={};
        public content:any="";
        public editorOption:any={};
        public orgImageUrls=new Array<any>();
        public currentImageUrls=new Array<any>();
        async created() {
            this.editorOption=quillRedefine(
                {
                    uploadConfig: {
                        action:"/mshop/api/gataway/upload/images",
                        res: (respnse) => {
                            return respnse.url
                        },
                        name: 'file'
                    }
                }
            );
            if(this.params){
                this.content=this.params.spuDataItem.description;
                this.name=this.params.spuDataItem.name;
                let reg=/http.*?\.jpg/g;
                this.orgImageUrls=this.content.match(reg);
            }
        }
        onEditorBlur(quill) {
            console.log("");
        }
        onEditorFocus(quill) {
            console.log("");
        }
        onEditorReady(quill) {
            console.log("");
        }
        onEditorChange({ quill, html, text }) {
            let reg=/http.*?\.jpg/g;
            this.content=html;
            this.currentImageUrls=this.content.match(reg);
            //新老数据做对比
        }
        @Emit("close")
        public close(){
            this.isShowDialog=false;
        }
        public addSpuName(){
            this.updateGoodState({spuName:this.name})
        }
        public confirm(){
            this.close();
        }
    }
</script>
<style lang="less">
    .spuBasicInfo{
        background-color: white;
        .ql-container{
            min-height: 220px;
            max-height: 220px;
            overflow: auto;
        }
    }
</style>